<template>
    <div>
      
        <h2>权益列表</h2>
        <table class="table table-bordered">
            <tr>
                <th><input type="checkbox" v-model="filge" @click="checkAll"></th>
                <th>权益名称</th>
                <th>权益图标</th>
                <th>修改时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in list">
                <th><input type="checkbox" v-model="arrids" :value="item.qId"></th>
                <td>{{ item.qName }}</td>
                <td> <img :src="item.qPhoto" alt="" width="70" height="70" /></td>
                <td>{{ item.updateTime.substring(0, 10) }}</td>
                <td>{{ item.qState == 1 ? '可用' : '不可用' }}</td>
                <td>
                    <input type="button" value="修改" @click="upd(item.qId)" />
                    <input type="button" v-if="item.qState == 1" value="禁用" @click="states(item.qId, item.qState)" />
                    <input type="button" v-else value="启用" @click="states(item.qId, item.qState)" />
                    <input type="button" value="添加权益" @click="add(item.qId)" />
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { FileWatcherEventKind } from 'typescript';
const router = useRouter();
let data: any = reactive({
    list: [],
    filge: false,
    arrids: []
})
let { list, filge, arrids } = toRefs(data)
onMounted(() => {
    getlist()
})
const getlist = () => {

    axios({
        url: '/api/Member/GetQuanYi',
        method: 'get',
    })
        .then(res => {
            console.log(res)
            list.value = res.data.data
        })
        .catch(err => {
            console.log(err)
        })
}

const checkAll = () => {
    filge.value = !filge.value
    if (filge.value == true) {
        arrids.value = list.value.map((item: any) => {
            return item.qId
        })
    }
    else {
        arrids.value = []
    }
}
const upd = (id: any) => {
    router.push({
        path: '/updQuanyi',
        query: {
            id: id
        }
    })
}
const add = (id: any) => {
    router.push({
        path: '/Qadd',
        query: {
            id: id
        }
    })
}
const states = (id: any, state: any) => {
    if (state == 1) {
        state = 0
    }
    else {
        state = 1
    }
    let obj = {
        id: id,
        state: state
    }
    axios({
        url: '/api/Member/UpdQState',
        method: "post",
        params: obj
    })
        .then(res => {
            console.log(res)
            if (res.data.data == 1) {
                alert("修改成功")
               getlist()
            }
            else {
                alert("修改失败")
                return
            }

        })
        .catch(err => {
            console.log(err)
        })
}


</script>

<style scoped></style>